<template>
	<!-- 输入框历史记录 -->
	<div class="history clearfix" :style="posi" v-show="show">
		<div class="his hovering" v-for="(item, index) in hisSearch" :key="item+index">
			<div class="text" @click="handlerText(item)">{{item.text}}</div>
			<span @click="removeItem(index)"><Icon type="close"/></span>
		</div>
		<div v-if="clear" class="clear-his fr" @click="clearHis">清空搜索历史</div>
	</div>
</template>

<script>
export default{
	props:{
		// 输入框name
		sName:{
			type: String
		},
		// 是否包含清空按钮
		clear:{
			type: Boolean,
			default: false
		}
	},
	computed:{
		// 返回历史记录的定位样式
		posi(){
			return{
				marginLeft: this.pops.l + 'px',
				marginTop: this.pops.t + 'px'
			}
		},
		// 根据name历史记录信息
		hisSearch(){
			return this.$store.state.search[this.sName];
		},
		// 根据是否有历史记录和是否显示浮窗，显示隐藏历史记录
		show(){
			return this.hisSearch.length > 0 && this.pops;
		},
		// 获取组件内置的历史记录的定位信息，根据有定位的父级定位
		pops(){
			return this.$store.state.pops.pops[this.sName];
		}
	},
	methods:{
		// 点击搜索记录提交事件
		handlerText(item){
			this.$emit('handlerText', item.text);
		},
		// 删除一条记录，清除隐藏历史记录的定时器
		removeItem(index){
			this.$store.commit('search/removeSearch', {name: this.sName, index})
			this.$emit('clear');
		},
		// 清空搜索记录，
		clearHis(){
			this.$store.commit('search/clearSearch', this.sName)
		},
		// 获取历史搜索记录
		getSearchHistory(){
			this.$store.commit('search/getSearchHistory', this.sName)
		}
	},
	mounted(){
		this.getSearchHistory();
	}
}
</script>

<style scoped lang="less">
.history{
	position: absolute;
	left: 0;
	top: 100%;
	width: 100%;
	padding: 10px 0;
	border: 1px solid #e5e9ef;
	border-radius: 2px;
	box-sizing: border-box;
	background-color: #fff;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 2px 4px;
	.his{
		position: relative;
		width: 100%;
		height: 32px;
		.text{
			width: 100%;
			line-height: 32px;
			padding: 0 24px 0 16px;
			box-sizing: border-box;
			color: #222222;
			display: block;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			font-size: 14px;
		}
		span{
			position: absolute;
			right: 10px;
			top: 0px;
			line-height: 32px;
			color: var(--c9);
			font-size: 14px;
			&:hover{
				color: var(--cblue);
			}
		}
	}
	.clear-his{
		display: inline-block;
		padding: 10px 10px 0 10px;
		text-align: right;
		font-size: 12px;
		color: #00a1d6;
		cursor: pointer;
	}
}
</style>
